$primary: #3abeea;
$primaryAside: white;
$primaryBody: #eeeeee;
$titleColor: #ff8e2a;
$textColor: #555b60;
$textColorReverse: white;
@mixin btn-hover-active-color($bg_color,$font_color) {
  background: $bg_color;
  color: $font_color;
  &:hover {
    background: darken($bg_color, 10%);
  }
  &:active {
    background: lighten($bg_color, 10%);
  }
}

.btn-primary,
.btn-primary.focus,
.btn-primary:focus {
  background-color: $primary !important;
  border-color: $textColorReverse;
}

body {
  background-color: $primaryBody;
}

.navbar {
  background-color: $primary;
  .navbar-toggle.pull-left {
    margin-top: 14px;
  }
  .nav-header-large-label {
    font-size: 30px !important;
  }
  .nav-header-small-label {
    padding-left: 10px;
    font-size: 12px !important;
  }
  .nav-height64 {
    height: 44px !important;
    line-height: 44px !important;
  }
  .ace-nav > li > a [class^="icomoon-"], [class*=" icomoon-"] {
    font-size: 20px;
    line-height: 44px;
  }
}

.navbar-fixed-top + .main-container {
  padding-top: 64px;
}

.main-container:before {
  background-color: transparent;
}

.sidebar {
  &.sidebar-fixed {
    top: 64px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    &:before {
      display: none;
    }
  }
  width: 260px;
  & + .main-content {
    margin-left: 260px;
    .breadcrumbs-fixed {
      left: 260px;
    }
  }
}

.breadcrumbs {
  height: 37px;
  min-height: 37px;
  line-height: 30px;
  border-bottom: 5px solid $primary;
  padding: 0 20px;
  > .icon-arrow {
    color: $primary;
    width: 20px;
    height: 100%;
    text-align: center;
    font-size: 30px;
    position: absolute;
    top: 0;
    &.icon-arrow-left {
      left: 0;
    }
    &.icon-arrow-right {
      right: 0;
    }
  }
  > .widget-header {
    background: none;
    min-height: 100%;
    border-bottom: none;
    > .widget-toolbar {
      line-height: inherit;
      .nav-tabs {
        top: 0;
        margin-top: 0 !important;
        li a {
          top: 0;
          border: 1px solid #F5F5F5 !important;
          border-bottom: none !important;
          line-height: 31px !important;
          width: 120px;
          padding: 0 5px;
          text-align: center;
          font-size: 14px;
          color: $textColor;
        }
        li:not(.active) a {
          margin-top: 0;
          padding-top: 0;
          padding-bottom: 0;
          background-color: white;
        }
        li.active a {
          background-color: $primary;
          padding-top: 0;
          padding-bottom: 0;
          color: white;
          font-weight: bold;
        }
      }
    }
  }
}

.breadcrumbs-fixed {
  position: fixed;
  right: 0;
  top: auto;
  z-index: 10;
  & + .page-content {
    padding-top: 57px;
  }
}

.nav-aside {
  background-color: $primaryAside;
  padding: 0 7px;
  .nav-aside-header {
    height: 40px;
    line-height: 40px;
    > a {
      text-decoration: none;
      font-size: 20px;
      color: $primary;
      &:hover {
        color: darken($primary, 10%);
      }
    }
    span {
      color: $textColor;
      padding-left: 5px;
    }
  }
  .nav-aside-menus {
    height: 304px;
    margin: 0;
    > li {
      width: 50%;
      height: 50%;
      float: left;
      list-style: none;
      position: relative;
      overflow: hidden;
      text-align: center;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      > .bg-wraper {
        height: 100%;
        line-height: 152px;
        > i {
          color: $primary;
          font-size: 65px;
          vertical-align: middle;
        }
      }
      &:nth-child(1) {
        background-image: url(../../images/index/b_1.png);
      }
      &:nth-child(2) {
        background-image: url(../../images/index/b_2.png);
      }
      &:nth-child(3) {
        background-image: url(../../images/index/b_4.png);
      }
      &:nth-child(4) {
        background-image: url(../../images/index/b_3.png);
      }
      &:hover {
        .container-menus {
          .one-col > div {
            top: 0;
          }
          .left-col {
            left: 0;
          }
          .right-col {
            right: 0;
          }
        }
      }
    }
  }
  .nav-aside-footer {
    height: 100px;
    background: url("../../images/index/slogan.png") no-repeat center;
    background-size: contain;
  }
}

.container-menus {
  padding: 0;
  height: 100%;
  width: 100%;
  color: $textColorReverse;
  position: absolute;
  left: 0;
  top: 0;
  > .row {
    margin: 0;
    height: 50%;
    font-size: 14px;
    > div {
      padding: 0;
      height: 100%;
      background: $primary;
      position: relative;
    }
    &.one-col > div {
      line-height: 76px;
      top: -100%;
      transition: top 0.3s ease-in;
    }
    &.two-col > div {
      width: 50%;
      border-top: 1px solid $textColorReverse;
      &.left-col {
        left: -50%;
        transition: left 0.3s ease-in;
        border-right: 1px solid $textColorReverse;
      }
      &.right-col {
        right: -50%;
        transition: right 0.3s ease-in;
      }
      &.line1 {
        line-height: 76px;
      }
      &.line2 {
        padding-top: 15px;
      }
      > span {
        display: block;
        //margin: 0;
      }
    }
  }
}

.row-with-shop-icon {
  height: 144px;
  display: flex;
  align-items: center;
  > .icon-left img {
    width: 98px;
    height: 98px;
  }
  > .content-right {
    flex: 1;
    height: 100px;
    padding-left: 10px;
    > h2 {
      font-size: 20px;
      color: $titleColor;
      margin: 0;
    }
    > p {
      height: 22px;
      line-height: 22px;
      font-size: 14px;
      margin: 5px 0;
      color: $textColor;
      > .icomoon-The-shop-assistant {
        vertical-align: middle;
      }
      > em {
        vertical-align: middle;
        font-style: normal;
        padding: 0 5px 0 8px;
      }
      > .icomoon-male,
      > .icomoon-female {
        vertical-align: middle;
        color: $primary;
      }
      > time {
        vertical-align: middle;
        font-size: 12px;
        padding-left: 8px;
      }
      > .icomoon-view {
        vertical-align: middle;
      }
    }
    > .yzd-button {
      width: 52px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s ease-in-out;
      @include btn-hover-active-color($titleColor, $textColorReverse);
    }
  }
}

.row-with-show-calendar {
  height: 40px;
  line-height: 40px;
  position: relative;
  > .high-light-label {
    background: $primary;
    color: $textColorReverse;
    border-radius: 5px;
    padding: 2px 8px;
  }
  > .shop-time {
    color: $textColor;
    font-size: 12px;
    padding-left: 10px;
  }
  > .shop-calendar {
    position: absolute;
    right: 10px;
    top: 50%;
    height: 32px;
    width: 32px;
    margin-top: -16px;
    text-align: center;
    background: $primary;
    border-radius: 4px;
    > .icomoon-editor {
      font-size: 23px;
      color: $textColorReverse;
    }
    > .ringing-bell {
      position: absolute;
      right: -18px;
      top: -5px;
      font-size: 26px;
      text-align: center;
      padding-right: 2px;
      padding-bottom: 2px;
      color: red;
      transform: scale(0.7);
      transform-origin: 50% 0;
      animation: ringing 3s infinite ease 1s;
      .ringing-bell-badge {
        position: relative;
        display: inline-block;
        text-align: center;
        width: 20px;
        left: 22px;
        top: -7px;
        color: white;
        font-weight: bolder;
        font-size: 12px;
      }
    }
  }
}

.row-with-balance {
  height: 78px;
  display: flex;
  align-items: center;
  > .row-balance-left {
    flex: 1;
    text-align: center;
    > p {
      margin: 0;
      line-height: 1;
    }
    > .balance-amount {
      font-size: 30px;
      color: $titleColor;
      margin-bottom: 12px;
    }
    > .balance-label {
      font-size: 16px;
      color: $textColor;
    }
  }
  > .row-balance-right {
    width: 17px;
    height: 100%;
    background: url(../../images/index/down-arrow.png) no-repeat center;
    background-size: contain;
    &.raise-arrow {
      transform: rotate(180deg);
    }
  }
}

.help-btns {
  padding: 25px 0;
  display: flex;
  justify-content: space-around;
  > span {
    height: 50px;
    width: 50px;
    text-align: center;
    border-radius: 14px;
    overflow: hidden;
    font-size: 25px;
    line-height: 50px;
    cursor: pointer;
  }
  .help-center {
    padding: 10px;
    font-size: 12px;
    line-height: 14px;
    @include btn-hover-active-color($primary, $textColorReverse);
  }
  .icomoon-radio {
    @include btn-hover-active-color(#FFDF5A, $textColorReverse);
  }
  .icomoon-teasing {
    @include btn-hover-active-color(#32CEEE, $textColorReverse);
  }
  .icomoon-mysterious {
    @include btn-hover-active-color(#9FE06A, $textColorReverse);
  }
}

.shop-radio {
  margin: 0 -7px;
  padding-left: 13px;
  height: 40px;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  > .icomoon-radio {
    color: #ff8e2a;
    font-size: 25px;
    background-color: #f9f9f9;
  }
  .shop-radio-content {
    position: relative;
    overflow: hidden;
    flex: 1;
    height: 20px;
    line-height: 20px;
    margin: 0 5px;
    .pos-abs{
      top: 0;
      left: 0;
      margin-bottom: 0;
      white-space: nowrap;
      height: 100%;
      a {
        font-size: 12px;
        color: $textColor;
        text-decoration: none;
        padding-right: 10px;
      }
    }
  }
}

@media only screen and (max-width: 991px) {
  .sidebar.responsive {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    max-height: none;
    width: 120px;
    & + .main-content {
      margin-left: 120px !important;
      .breadcrumbs-fixed {
        left: 120px;
      }
    }
  }
  .nav-aside {
    .nav-aside-header {
      span {
        display: none;
      }
    }
    .nav-aside-menus {
      height: auto;
      padding: 0 2px;
      > li {
        float: none;
        width: 100%;
        > .bg-wraper {
          line-height: 80px;
          > i {
            font-size: 35px;
          }
        }
        .one-col > div {
          line-height: 40px;
        }
        .two-col > div {
          &.line1 {
            line-height: 40px;
          }
          &.line2 {
            padding-top: 3px;
            line-height: 1.2;
          }
        }
      }
    }
  }
  .row-with-shop-icon {
    > .icon-left {
      display: none;
    }
    > .content-right {
      padding-left: 0;
      > h2 {
        font-size: 16px;
      }
      > p {
        width: 88px;
        white-space: nowrap;
        overflow: hidden;
      }
      > .yzd-button {
        margin: 0 auto;
      }
    }
  }
  .row-with-show-calendar {
    height: auto;
    text-align: center;
    padding: 10px 0;
    > .shop-time {
      display: none;
    }
    > .shop-calendar {
      position: relative;
      display: block;
      margin: 4px auto;
      right: auto;
      top: auto;
    }
  }
  .row-with-balance {
    height: 54px;
    > .row-balance-left {
      > .balance-amount {
        font-size: 16px;
      }
      > .balance-label {
        font-size: 12px;
      }
    }
    > .row-balance-right {
      height: 24px;
    }
  }
  .help-btns {
    display: block;
    padding: 0;
    > span {
      display: block;
      margin: 10px auto;
      width: 30px;
      height: 30px;
      line-height: 30px;
      font-size: 20px;
    }
    .help-center {
      font-size: 12px;
      padding: 2px 0 0 0;
      border-radius: 8px;
    }
    .icomoon-radio {
      @include btn-hover-active-color($textColorReverse, #FFDF5A);
    }
    .icomoon-teasing {
      @include btn-hover-active-color($textColorReverse, #32CEEE);
    }
    .icomoon-mysterious {
      @include btn-hover-active-color($textColorReverse, #9FE06A);
    }
  }
  .shop-radio {
    padding-left: 0;
  }
}

.nav-tabs > li > span.glyphicon {
  font-size: 8px;
  color: $textColor;
  cursor: pointer;
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 1;
  &.active {
    color: $textColorReverse;
  }
  &:hover {
    color: darken($textColor, 10%);
  }
  &:active {
    color: lighten($textColor, 10%);
  }
}

.padding-tb10 {
  padding: 10px 0;
}

.page-content {
  background-color: transparent;
  padding: 20px;
  > .widget-body {
    background-color: transparent;
  }
}

.index-container {
  position: relative;
  > .left {
    padding-right: 0;
    margin-right: 254px;
    > .row {
      margin: 24px 0 0 0;
      .col-white {
        background: white;
        position: relative;
        border-radius: 5px;
        overflow: hidden;
      }
    }
    .three-col {
      margin-top: 12px;
      .col-xs-4 {
        width: 40%;
      }
      .col-xs-3 {
        width: 30%;
        .col-price {
          .col-money {
            flex: 1;
            line-height: 1;
            padding-left: 4%;
            > p {
              font-size: 1vw;
              white-space: nowrap;
            }
            > span {
              font-size: 1.5vw;
              color: $primary;
            }
          }
        }
      }
      .col-white {
        height: 20vh;
        min-height: 100px;
        display: flex;
        align-items: center;
        .icomoon-date {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 24px;
          padding: 3%;
        }
        .col-price {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 4%;
          > span {
            font-size: 2.2vw;
            color: $titleColor;
          }
          .btn-primary {
            font-size: inherit;
            width: auto;
            padding: 0 5%;
            background: $primary !important;
          }
          .icomoon-income {
            color: white;
            font-size: 25px;
            background: $primary;
            padding: 6%;
          }
        }
        > p {
          position: absolute;
          left: 0;
          bottom: 2%;
          width: 100%;
          margin-bottom: 0;
          padding: 0 10px;
          height: 20px;
          line-height: 20px;
          color: $textColor;
          .pull-right {
            font-size: 1vw;
            padding-bottom: 3px;
            transform: rotate(180deg);
          }
        }
      }
    }
    .two-col {
      .col-white {
        padding: 2% 4%;
        min-height: 24vh;
        display: flex;
        align-items: center;
        > .pull-left {
          float: none !important;
          flex: 1;
          .title {
            height: 40px;
            display: flex;
            align-items: center;
            line-height: 1;
            span {
              color: $textColor;
              font-size: 1.5vw;
              margin-right: 10px;
            }
            small {
              font-size: 1vw;
              background: $titleColor;
              color: $textColorReverse;
              padding: 5px;
              position: relative;
              i {
                position: absolute;
                top: -6px;
                right: -6px;
                width: 16px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                background: red;
                border-radius: 50%;
                font-size: 12px;
                font-style: normal;
              }
            }
          }
          .text {
            color: $textColor;
            padding-top: 4%;
            margin-bottom: 0;
            line-height: 1;
            span {
              color: $primary;
              font-size: 2.4vw;
            }
          }
        }
        > .pull-right {
          float: none !important;
          padding: 3% 4%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          > i {
            font-size: 38px;
          }
          > span {
            font-size: 14px;
            letter-spacing: 3px;
          }
          &.icon {
            background: #F3F3F3;
            color: $primary;
          }
          &.font {
            background: $primary;
            color: white;
          }
        }
      }
    }
    .four-col {
      .col-white {
        height: 24vh;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        color: $primary;
        i {
          font-size: 55px;
        }
        p {
          color: $textColor;
          margin: 10px 0 0 0;
          font-size: 1vw;
        }
      }
    }
  }
  > .right {
    position: absolute;
    right: 12px;
    top: -24px;
    width: 230px;
    .item {
      margin-top: 24px;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
      }
      span {
        position: absolute;
        color: white;
        &.count {
          strong {
            font-size: 36px;
            margin-right: 10px;
          }
        }
      }
    }
    .color1 {
    }
    .color2 {
      span.title {
        top: 15%;
        left: 50%;
      }
      span.count {
        top: 45%;
        left: 50%;
      }
    }
    .color3 {
      margin-bottom: 24px;
      span.title {
        top: 55%;
        left: 6%;
        width: 58%;
        text-align: right;
        height: 3em;
        overflow: hidden;
      }
      span.count {
        top: 10%;
        left: 15%;
        line-height: 1;
      }
    }
  }
}

@media only screen and (max-width: 991px) {
  .index-container {
    > .left {
      margin-right: 0;
      .three-col .col-white .col-price > span {
        font-size: 3.5vw !important;
      }
      .three-col .col-white .col-price .col-money > p {
        font-size: 1.5vw;
      }
      .three-col .col-white .col-price .col-money > span {
        font-size: 3vw;
      }
      .two-col .col-white .title span {
        font-size: 2.5vw !important;
      }
      .two-col .col-white .text span {
        font-size: 4vw !important;
      }
      .four-col .col-white p {
        font-size: 2vw;
      }
    }
    > .right {
      position: static;
      width: auto;
      display: flex;
      .item {
        margin-left: 12px;
        margin-right: 12px;
        height: 20vh;
        background: no-repeat center;
        background-size: contain;
        img {
          width: auto;
          display: none;
        }
      }
      .color1 {
        flex: 3;
        background-color: #57c5ec;
        background-image: url("../../images/index/color1.png");
      }
      .color2 {
        flex: 4;
        //background: linear-gradient(rgb(138,242,228), rgb(57,225,203));
        background-image: url("../../images/index/color2.png");
        background-size: 100% 100%;
      }
      .color3 {
        flex: 4;
        background-color: #fcdb5d;
        background-image: url("../../images/index/color3.png");
      }
    }
  }
}